/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from "react";
import './install.css';
import { useHistory } from "react-router-dom/cjs/react-router-dom";
import { useDispatch } from "react-redux";
import DownloadProcessBar from "@/components/DownloadProcessBar/downloadProcessBar";
import NavigateBar from "@/components/NavigateBar";
import AddHomeEvent from "@/utils/addHomeEvent";

import icon_app_logo from "@/assets/icon_app_logo.png"
import icon_banner2_mode1_gha from "@/assets/icon_banner2_mode1_gha.jpg"
import icon_banner2_mode2_gha from "@/assets/icon_banner2_mode2_gha.jpg"
import icon_banner2_mode3_gha from "@/assets/icon_banner2_mode3_gha.jpg"
import icon_banner2_mode4_gha from "@/assets/icon_banner2_mode4_gha.jpg"
import icon_banner2_mode5_gha from "@/assets/icon_banner2_mode5_gha.jpg"
import icon_about_arrow from '@/assets/icon_about_arrow.jpg'
import { LangStore } from "@/lang/langStore";
import { LangEnGhs } from "@/lang/langEnGhs";
import { reqSaveEvent } from "@/store/actions/apiServices";
import { Toast } from "antd-mobile";
import ProofNavigateBar from "@/components/ProofNavigateBar";


let initializingTimer;
export default function Install() {

    // 获取路由历史 history 对象
    const history = useHistory()

    // 文案翻译
    const [curLang, setCurLang] = useState(LangEnGhs);

    // 接口转发
    const [curPath, setCurPath] = useState(null);

    // 商店截图
    const [curPlayIcons, setCurPlayIcons] = useState([icon_banner2_mode2_gha, icon_banner2_mode3_gha, icon_banner2_mode4_gha, icon_banner2_mode5_gha, icon_banner2_mode1_gha]);

    // 文案翻译
    const [curAppStore, setCurAppStore] = useState(LangStore);

    // 是否在下载
    const [isDownloading, setIsDownloading] = useState(false);
    const [isInitializing, setIsInitializing] = useState(true);
    const maxCount = 10;
    const [initializingSeconds, setInitializingSeconds] = useState(maxCount)

    //获取 Redux 分发器
    const dispatch = useDispatch()

    const items = curPlayIcons.map((banner, index) => (
        <img className="installSwiperItemImageSelf" src={banner} alt="" key={index} />
    ));

    useEffect(() => {
        //添加 fb 像素
        // eslint-disable-next-line no-undef
        // fbq('track', 'Page_Download');
        // eslint-disable-next-line no-undef
        // gtag('track', 'Page_Download');

        window.addEventListener("onAppAgreeInstall", (e) => {
            console.log("found: onAppAgreeInstall");
            setIsDownloading(true);
        });

        reqSaveEvent("INSTALL_START");

        initializingTimer = setInterval(() => { setInitializingSeconds((v) => (v - 1)); }, 1000);

        return () => {
            initializingTimer && clearInterval(initializingTimer);
            reqSaveEvent("INSTALL_END");
        }
    }, [])

    useEffect(() => {
        if (initializingSeconds <= 0) {
            initializingTimer && clearInterval(initializingTimer);
            setIsInitializing(false);
        }
    }, [initializingSeconds])

    const onHandleInstallClick = () => {
        if (!window.canAddHomeEvent) {
            Toast.show("Session timeout, please try again.");

            setTimeout(() => {
                window.location.reload(true);
            }, 1500);
            return;
        }
        AddHomeEvent.onHandleAddHomeEventClick();

        reqSaveEvent("INSTALL_CLICK");
    };

    const onHandleDownloadProcessFinish = () => {
        setIsDownloading(false);
    }

    const onHandleNavGoBack = () => {
        history.goBack()
    }

    return (
        <div className="installRoot">
            <ProofNavigateBar theme="white" onBackClick={onHandleNavGoBack}>Install</ProofNavigateBar>

            {curLang && <div className="installRoot">
                <div className="installRowGlobalPadding installMarginTop17Px">
                    <img className="installAppLogo" src={icon_app_logo} alt="" />

                    <div className="installColumnFullRight installPaddingLeft16Px">
                        <span className="installAppName">{curLang.appName}</span>
                        <span className="installAppOwner installMarginTop5Px">{curLang.appDev}</span>
                    </div>
                </div>

                <div className="installRowGlobalPadding installMarginTop32Px installFlexCenter">
                    <div className="installColumnStoreItem">
                        <div className="installStoreText">{curAppStore.appReviewStar}</div>
                        <div className="installStoreTips installMarginTop5Px">{curAppStore.appReviewCount} {curLang.reviews}</div>
                    </div>

                    <div className="installColumnStoreItem">
                        <div className="installStoreText">{curAppStore.appDownloadCount}</div>
                        <div className="installStoreTips installMarginTop5Px">{curLang.downloads}</div>
                    </div>

                    <div className="installColumnStoreItem">
                        <div className="installStoreTextAgeLimit">{curAppStore.appAgeLimit}</div>
                        <div className="installStoreTips installMarginTop5Px">{curLang.ratedFor3Plus}</div>
                    </div>
                </div>

                {isInitializing && <div className="installRowGlobalPadding installFlexCenter installMarginTop42Px installPadding26Px">
                    <div className="installBtnInstallUnable" onClick={() => { }}>
                        <div className="installInstallText">{curLang.initializing}{initializingSeconds}s</div>
                    </div>
                </div>}

                {!isInitializing && !isDownloading && <div className="installRowGlobalPadding installFlexCenter installMarginTop42Px installPadding26Px">
                    <div className="installBtnInstall" onClick={onHandleInstallClick}>
                        <div className="installInstallText">{curLang.toInstall}</div>
                    </div>
                </div>}

                {!isInitializing && isDownloading && <div className="installRowGlobalPadding installFlexCenter installMarginTop42Px installPadding26Px">
                    <DownloadProcessBar onAnimationFinish={() => { onHandleDownloadProcessFinish() }} />
                </div>}

                <div className="installRowGlobalPadding installMarginTop60Px">
                    <div className="installSwiperContent">
                        {items}
                    </div>
                </div>

                <div className="installRowGlobalPadding installMarginTop17Px">
                    <div className="installStepTitle">{curLang.aboutThisApp}</div>
                    <img className="installStepIcon" src={icon_about_arrow} alt="" onClick={onHandleInstallClick} />
                </div>

                <div className="installRowGlobalPadding installFlexCenter installMarginTop10Px">
                    <div className="installStepText">
                        {curLang.appStoreListingRow1}<br></br>
                        {curLang.appStoreListingRow2}<br></br>
                        {curLang.appStoreListingRow3}<br></br>
                        {curLang.appStoreListingRow4}<br></br>
                        {curLang.appStoreListingRow5}<br></br>
                        {curLang.appStoreListingRow6}<br></br>
                    </div>
                </div>

                <div className="installColumnGlobalPadding installMarginTop14Px">
                    <div className="installStepTitle installFontSize14px">{curLang.updatedOn}</div>
                    <div className="installStepText installFontColorUpdate installMarginTop5Px">{curLang.updatedDate}</div>
                </div>

                <div className="installRowGlobalPadding installMarginTop28Px">
                    <div className="installCateTag">{curLang.topFreeFinance}</div>
                    <div className="installSpace11Px"></div>
                    <div className="installCateTag">{curLang.finance}</div>
                </div>

                <div className="installSpace11Px installMarginTop42Px"></div>

            </div>}

            {!curLang && <div className="installLogoBg">
                <img className="installLogo" alt="" src={icon_app_logo} />
            </div>}
        </div>
    )
}